import React from 'react';
import {injectIntl} from './intl';
import {Table, Spin, Card, Button} from 'antd';
import PropTypes from 'prop-types';
import routes from './routes';
import {
    COMMON_TABLE_QUERY_FAIL_TEXT,
    COMMON_TABLE_EMPTY_TEXT,
    TABLE,
    FIXED_COLUMN_WIDTH
} from '../constants';
import {Link} from 'react-router-dom';
import {hasPermissions} from './utils';
import {PERMISSION} from './constants';
import DropdownMenu from 'Shared/components/DropdownMenu';
const EMPTY_ARRAY = [];
const sortByName = (a, b) => {
    if(a.typeName && b.typeName)
        return a.typeName.localeCompare(b.typeName);
    return 0;
};
/*eslint-disable  react/prefer-stateless-function*/
export class Orders extends React.PureComponent {
    render() {
        const columns = [
            {
                title: this.props.intl.formatMessage({
                    id: 'orders.column.typeName',
                    defaultMessage: '订单类型'
                }),
                dataIndex: 'typeName',
                sorter: sortByName,
                render: (text, record) => (
                    <Link key="detail" to={routes.detail.format(record.id)}>
                        {text}
                    </Link>
                )
            },
            {
                title: this.props.intl.formatMessage({
                    id: 'orders.column.creditCode',
                    defaultMessage: '销售类型凭证编号'
                }),
                dataIndex: 'creditCode'
            },
            {
                title: this.props.intl.formatMessage({
                    id: 'orders.column.orderReasonCode',
                    defaultMessage: '订购原因编号'
                }),
                dataIndex: 'orderReasonCode'
            },
            {
                title: this.props.intl.formatMessage({
                    id: 'orders.column.orderReason',
                    defaultMessage: '订购原因描述'
                }),
                dataIndex: 'orderReason',
            },
        ];
        if(this.props.permissions.length)
            columns.push({
                title: this.props.intl.formatMessage({
                    id: 'orders.column.action',
                    defaultMessage: '操作'
                }),
                dataIndex: 'action',
                width: FIXED_COLUMN_WIDTH,
                fixed: 'right',
                render: (t, r) => hasPermissions(r.options, PERMISSION.update) && <Link key="update" to={routes.update.format(r.id)}>
                    {this.props.intl.formatMessage({
                        id: 'orders.operation.update',
                        defaultMessage: '编辑'
                    })}
                </Link>
            });
        const locale = {
            emptyText: this.props.errorMessage ? COMMON_TABLE_QUERY_FAIL_TEXT : COMMON_TABLE_EMPTY_TEXT
        };
        return (
            <div>
                <Spin spinning={this.props.loading}>
                    <Card>
                        <Table
                            className="white-space-nowrap"
                            columns={columns}
                            dataSource={this.props.types}
                            rowKey="id"
                            pagination={false}
                            loading={this.props.loading}
                            {...TABLE}
                            locale={locale} />
                    </Card>
                </Spin>
                {this.props.permissions.length ? <div className="page-toolbar">
                    <Button type="primary" href={`#${routes.import.url()}`}>
                        {this.props.intl.formatMessage({
                            id: 'orders.btn.import',
                            defaultMessage: '导入'
                        })}
                    </Button>
                </div> : null}
            </div>
        );
    }
}
Orders.defaultProps = {
    types: EMPTY_ARRAY,
};
Orders.propTypes = {
    loading: PropTypes.bool.isRequired,
    permissions: PropTypes.array.isRequired,
    types: PropTypes.array.isRequired,
    errorMessage: PropTypes.string,
    history: PropTypes.object,
    intl: PropTypes.object
};

import {connect} from 'react-redux';
import selectorFactory from 'Shared/utils/immutableToJsSelectorFactory';
const getData = selectorFactory(['page', 'domainData', 'initData', 'saleOrderTypes']);
const getPermissions = selectorFactory(['page', 'domainData', 'permission', 'data']);
const mapStateToProps = state => ({
    loading: state.getIn(['page', 'domainData', 'initData', 'isFetching']),
    errorMessage: state.getIn(['page', 'domainData', 'initData', 'message']),
    permissions: getPermissions(state),
    types: getData(state),
});
export default connect(
    mapStateToProps,
    null
)(injectIntl(Orders));

